from nicegui import ui
import 界面, 数据


@ui.page("/mirror")
def p_mirror():
    # fzqr100 2025-08 ##################################################
    # 原来放在外面，开多个页面数据监测有问题（全局变量被更新了，后面的页面实例就监测不到变化了）
    # 监控变量移到页面函数中，这样每个页面实例都可以检测到变化
    class 监控变量:
        左边得分 = 0
        右边得分 = 0
        左边颜色 = ""

        @classmethod
        def 有变化(cls) -> bool:
            l = 数据.左边得分()
            r = 数据.右边得分()
            c = 数据.左边颜色()
            if l != cls.左边得分 or r != cls.右边得分 or c != cls.左边颜色:
                cls.左边得分 = l
                cls.右边得分 = r
                cls.左边颜色 = c
                return True
            return False

    def main():
        ui_main.clear()
        with ui_main:
            ui_left = ui.column().classes("items-center")
            ui_middle = ui.column().classes("items-center")
            ui_right = ui.column().classes("items-center")

            with ui_left.classes(f"text-[{数据.右边颜色()}]"):
                with ui.card().classes(
                    "rounded-xl bg-gray-500 bg-opacity-20"
                ), ui.row():
                    ui.label(f"{数据.右边姓名()}").classes(f"text-h5 font-bold")
                    ui.badge(f"{数据.右边胜局()}", color=f"{数据.右边颜色()}").classes(
                        f"text-h5 font-bold"
                    )
                # 比分牌
                with ui.card().classes(
                    f"w-full h-full rounded-xl bg-[{数据.右边颜色()}] bg-opacity-80"
                ):
                    ui.label(f"{数据.右边状态()}").classes("text-h5 m-2").style(
                        "position: absolute; top: 0; right: 0;"
                    )
                    ui.label(数据.右边得分()).classes(
                        "w-full h-full text-[128px] font-bold flex items-center justify-center"
                    ).style("color: white")

            with ui_right.classes(f"text-[{数据.左边颜色()}]"):
                with ui.card().classes(
                    "rounded-xl bg-gray-500 bg-opacity-20"
                ), ui.row():
                    ui.label(f"{数据.左边姓名()}").classes(f"text-h5 font-bold")
                    ui.badge(f"{数据.左边胜局()}", color=f"{数据.左边颜色()}").classes(
                        f"text-h5 font-bold"
                    )
                # 比分牌
                with ui.card().classes(
                    f"w-full h-full rounded-xl bg-[{数据.左边颜色()}] bg-opacity-80"
                ):
                    ui.label(f"{数据.左边状态()}").classes("text-h5 m-1").style(
                        "position: absolute; top: 0; left: 0;"
                    )
                    ui.label(数据.左边得分()).classes(
                        "w-full h-full text-[128px] font-bold flex items-center justify-center"
                    ).style("color: white")

            with ui_middle.classes("gap-2"):
                ui.label("---镜像控制中---").classes("bg-red text-white font-bold")
                ui.link("回到主界面", "/")
                ui.button("重新开始", on_click=重新开始).classes("w-24").props(
                    "color=orange"
                )
                with ui.row().classes("gap-4"):
                    ui.button("交", on_click=界面.交换场地).classes("w-10").props(
                        "color=green"
                    )
                    ui.button("下", on_click=界面.下一局).classes("w-10").props(
                        "color=green"
                    )
                with ui.card().classes(
                    "rounded-xl bg-gray-500 bg-opacity-20 items-center gap-0 p-2"
                ):
                    ui.label(数据.显示比赛局数()).classes(
                        "text-h5 font-bold text-gray-700"
                    )
                    ui.label(f"第{数据.当前局()}局").classes(
                        "text-h5 font-bold text-gray-700"
                    )
                with ui.row().classes("gap-4"):
                    ui.button("+", on_click=界面.右边加分).classes("w-10").classes(
                        f"!bg-[{数据.右边颜色()}]"
                    )
                    ui.button("+", on_click=界面.左边加分).classes("w-10").classes(
                        f"!bg-[{数据.左边颜色()}]"
                    )
                with ui.row().classes("gap-4"):
                    ui.button("-", on_click=界面.右边减分).classes("w-10").classes(
                        f"!bg-[{数据.右边颜色()}]"
                    )
                    ui.button("-", on_click=界面.左边减分).classes("w-10").classes(
                        f"!bg-[{数据.左边颜色()}]"
                    )

    async def 重新开始():
        ui_快捷键.active = False
        if await 界面.show_confirm("🟠 确定要重新开始比赛吗？"):
            await 界面.重新开始(需要确认=False)
            ui.navigate.to("/")
        else:
            ui_快捷键.active = True

    def _刷新页面():
        if 数据.比赛进行中() != True:
            ui.navigate.to("/")
            return

        if 监控变量.有变化():
            main()

    async def _快捷键(e):
        if e.action.keydown:
            if e.key == "ArrowUp":
                界面.右边加分()
            elif e.key == "ArrowDown":
                界面.右边减分()
            elif e.key == "ArrowLeft":
                界面.左边减分()
            elif e.key == "ArrowRight":
                界面.左边加分()
            elif e.key == "Escape":
                await 重新开始()
            elif e.key == " ":
                界面.交换场地()
            elif e.key == "Enter":
                界面.下一局()

    ui_快捷键 = ui.keyboard(on_key=_快捷键, repeating=False, active=True)
    ui_main = ui.grid(columns="3fr 1fr 3fr").classes("mx-auto bg-gray-200")
    ui.timer(0.1, _刷新页面, immediate=False)
    main()
